// 老写法
// import ReactDOM from 'react-dom'
// 新写法
import ReactDOM from 'react-dom/client'
import './index.css'
// classnames 灵活的控制类名
// 下载 yarn add calssnames
// 导入
import classnames from 'classnames'
// classnames是个函数
// classnames({ active: true })=>'active'
// classnames({ active: flase })=>''
//

import dayjs from 'dayjs'
// dayjs().format('YYYY-MM-DD HH:mm:ss')

// 封装格式化函数
const formatTime = (time, str = 'YYYY-MM-DD HH:mm:ss') => {
  return dayjs(time).format(str)
}

const state = {
  // hot: 热度排序  time: 时间排序
  tabs: [
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ],
  active: 'hot',
  list: [
    {
      id: 1,
      author: '传智教育',
      comment: '好口碑IT培训机构,一样的教育,不一样的品质',
      time: new Date('2021-12-10 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
      avatar: 'http://www.itcast.cn/2020gw/images/indeximg/logobot2.jpg',
    },
    {
      id: 2,
      author: '黑马程序员',
      comment: '键盘敲烂，月薪过万',
      time: new Date('2021-12-11 09:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
      avatar: 'http://www.itheima.com/images/logo.png',
    },
    {
      id: 3,
      author: '上海前端',
      comment: '月薪1万5，简简单单',
      time: new Date('2021-12-11 10:09:00'),
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
      avatar: 'http://geek.itheima.net/images/user_head.jpg',
    },
  ],
}

const element = (
  <div className="App">
    <div className="comment-container">
      {/* 评论数 */}
      <div className="comment-head">
        <span>5 评论</span>
      </div>

      {/* 排序 */}
      {/* :class="{on:true" => 需要插件classnames */}
      <div className="tabs-order">
        <ul className="sort-container">
          {state.tabs.map((item) => (
            <li
              // className={state.active === item.type ? 'on' : ''}
              className={classnames({ on: item.type === state.active })}
              key={item.id}
            >
              按{item.name}排序
            </li>
          ))}
          {/* <li>按时间排序</li> */}
        </ul>
      </div>

      {/* 添加评论 */}
      <div className="comment-send">
        <div className="user-face">
          <img
            className="user-head"
            src="http://geek.itheima.net/images/user_head.jpg"
            alt=""
          />
        </div>
        <div className="textarea-container">
          <textarea
            cols="80"
            rows="5"
            placeholder="发条友善的评论"
            className="ipt-txt"
          />
          <button className="comment-submit">发表评论</button>
        </div>
        <div className="comment-emoji">
          <i className="face"></i>
          <span className="text">表情</span>
        </div>
      </div>

      {/* 评论列表 */}
      <div className="comment-list">
        {state.list.map((item) => {
          return (
            <div className="list-item" key={item.id}>
              <div className="user-face">
                <img className="user-head" src={item.avatar} alt="" />
              </div>
              <div className="comment">
                <div className="user">{item.author}</div>
                <p className="text">{item.comment}</p>
                <div className="info">
                  <span className="time">
                    {/* {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')} */}
                    {formatTime(item.time)}
                  </span>
                  <span
                    className={classnames('like', {
                      liked: item.attitude === 1,
                    })}
                  >
                    <i className="icon" />
                  </span>
                  <span className={`hate ${item.attitude === -1 && 'hated'}`}>
                    <i className="icon" />
                  </span>
                  <span className="reply btn-hover">删除</span>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  </div>
)

// ReactDOM.render(element, document.getElementById('root'))
ReactDOM.createRoot(document.getElementById('root')).render(element)
